<template>
    <div class="all-container">
        <el-card>
             <h1>全部学生</h1>
             <el-form ref="form" :model="form" label-width="80px" class="form">
                <el-form-item label="学校名称">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学生姓名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="年级">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
             </el-form>
             <el-button type="primary">搜索</el-button>
        </el-card>
        <el-card>
            <div class="btns">
                <el-button type='primary'>新增</el-button>
                <el-button type="success">授予荣誉学术成果</el-button>
                <el-button type="warning">导出</el-button>
            </div>
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                    <el-table-column
                        prop="serial"
                        label="序号"
                        width="62">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="姓名"
                        width="86">
                    </el-table-column>
                     <el-table-column
                        prop="school"
                        label="学校名称"
                        width="148">
                    </el-table-column>
                    <el-table-column
                        prop="school"
                        label="学校名称"
                        width="148">
                    </el-table-column>
                    <el-table-column
                        prop="school"
                        label="学校名称"
                        width="148">
                    </el-table-column>
                    <el-table-column
                        prop="snumber"
                        label="学号"
                        width="148">
                    </el-table-column>
                    <el-table-column
                        prop="grade"
                        label="年级"
                        width="123">
                    </el-table-column>
                    <el-table-column
                        prop="sclass"
                        label="班级"
                        width="62">
                    </el-table-column>
                    <el-table-column
                        prop="gender"
                        label="性别"
                        width="123">
                    </el-table-column>
                    <el-table-column
                        prop="birthday"
                        label="出生日期"
                        width="148">
                    </el-table-column>
                    <el-table-column
                        prop="tearcher"
                        label="班主任"
                        width="148">
                    </el-table-column>
                    <el-table-column
                        prop="operater"
                        label="操作"
                        width="246">
                            <template slot-scope="scope">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
                                    <el-button type="text" size="small">编辑</el-button>
                                    <el-button type="text" size="small">删除</el-button>
                            </template>
                    </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>

        </el-card>
    </div>
</template>

<script>
export default {
  name: 'AllView',
  props: {},
  components: {},
  data () {
    return {
      currentPage4: 4,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      tableData: [{
        serial: '1',
        name: '王小虎',
        school: '南京市金陵小学',
        snumber: '202200001',
        grade: '三年级',
        sclass: '1班',
        gender: '女',
        birthday: '2006-10-14',
        tearcher: '张琳(001)',
        operater: ''
      },
      {
        serial: '1',
        name: '王小虎',
        school: '南京市金陵小学',
        snumber: '202200001',
        grade: '三年级',
        sclass: '1班',
        gender: '女',
        birthday: '2006-10-14',
        tearcher: '张琳(001)',
        operater: ''
      },
      {
        serial: '1',
        name: '王小虎',
        school: '南京市金陵小学',
        snumber: '202200001',
        grade: '三年级',
        sclass: '1班',
        gender: '女',
        birthday: '2006-10-14',
        tearcher: '张琳(001)',
        operater: ''
      },
      {
        serial: '1',
        name: '王小虎',
        school: '南京市金陵小学',
        snumber: '202200001',
        grade: '三年级',
        sclass: '1班',
        gender: '女',
        birthday: '2006-10-14',
        tearcher: '张琳(001)',
        operater: ''
      },
      {
        serial: '1',
        name: '王小虎',
        school: '南京市金陵小学',
        snumber: '202200001',
        grade: '三年级',
        sclass: '1班',
        gender: '女',
        birthday: '2006-10-14',
        tearcher: '张琳(001)',
        operater: ''
      }
      ],
      relative: [
        { id: 1, prop: 'serial', label: '序号', width: '62' },
        { id: 2, prop: 'name', label: '姓名', width: '86' },
        { id: 3, prop: 'school', label: '学校名称', width: '' },
        { id: 4, prop: 'snumber', label: '学号', width: '148' },
        { id: 5, prop: 'grade', label: '年级', width: '123' },
        { id: 6, prop: 'sclass', label: '班级', width: '62' },
        { id: 7, prop: 'gender', label: '性别', width: '62' },
        { id: 8, prop: 'birthday', label: '出生日期', width: '148' },
        { id: 9, prop: 'tearcher', label: '班主任', width: '148' },
        { id: 10, prop: 'operater', label: '操作', width: '246' }
      ]
    }
  },
  computed: {},
  watch: {},
  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleClick (e) {
      console.log(e)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  },
  /**
  */
  created () {
  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted () {
  }
}
</script>

<style scoped lang="scss">
.all-container{
  .form{
        display: flex;
    }
    .btns{
        padding: 20px 0;
    }

}

</style>
